<!--页面整体的布局-->


<template>
  <!--顶部导航栏-->
  <van-nav-bar :title="title"
               left-arrow
               @click-left="onClickLeft"
               @click-right="searchForTags"
  >
    <template #right>
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>


  <!--中间正文部分-->
  <div class="content">
    <router-view/>
  </div>

  <!--底部菜单栏-->
  <van-tabbar route>
    <van-tabbar-item to="/index" icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item to="/follow" icon="friends-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item to="/team" icon="search" name="team">组队</van-tabbar-item>
    <van-tabbar-item to="/user" icon="manager-o" name="user">个人中心</van-tabbar-item>
  </van-tabbar>

</template>

<script setup lang="ts">
import 'vant/lib/index.css';
import {useRoute, useRouter} from 'vue-router';
import {ref,onMounted, onBeforeUnmount} from "vue";


// 创建router实例对象
const router = useRouter();
const route = useRoute()

const DEFAULT_TITLE = '伙伴交友';
const title = ref(DEFAULT_TITLE);

// 更新标题函数
const updateTitle = () => {
  title.value = route.meta.title ? (route.meta.title as string) : '伙伴交友'
}

// 监听路由变化
const onRouteChange = () => {
  updateTitle()
}

// 挂载后执行
onMounted(() => {
  updateTitle()
  router.afterEach(onRouteChange)
})

// 卸载前执行
onBeforeUnmount(() => {
  router.afterEach(onRouteChange)
})


// // 获取routes的信息, 监听route变化
// router.beforeEach((to) => {
//   let toPath = to.path;
//   const route = routes.find((routes) => {
//     console.log( routes)
//     return toPath = routes.children?.find((childPath) => childPath.path);
//   })
//   console.log(route);
//   // @ts-ignore
//   title.value = route?.children?.title ?? DEFAULT_TITLE;
// })

// 顶部导航栏
const onClickLeft = () => {
  router.back();
};
const searchForTags = () => {
  router.push('/search');
}


</script>

<style scoped>
.content {
  padding-bottom: 50px;
}


</style>
